let arrowR = document.querySelector(".arrow_right");
let arrowL = document.querySelector(".arrow_left");
let imgList = document.querySelectorAll(".img_box > ul > li");
let ul = document.querySelector(".img_box > ul");
let barList = document.querySelectorAll(".bar_box > span");
let box = document.querySelector(".box");
let index = 0; // 初始化变量
let lastIndex = 0; // 保存上一次操作的初始化变量
let timer; // 自动轮播定时器

box.addEventListener("click", function (e) {

    if (e.target.innerHTML == "&gt;") {
        

        if (index <4 ) {
            ul.style.transition = "1s ease";
            ul.style.transform += "translateX(-400px)";
            index++;
        }
        else {
            ul.style.transition = "";
            ul.style.transform = "translateX(0px)";
            // ul.style.transform += "translateX(-400px)";
            index = 0;
        }
    } else if (e.target.innerHTML == "&lt;") {
        if (index < 0) {
            ul.style.transition = "";

            ul.style.transform = "translateX(-1200px)";
            index = 3;
        } else {
            ul.style.transition = "1s ease";
            ul.style.transform += "translateX(400px)";
            index--;
        }
    }
    // console.log(e.target.innerHTML);

});

// // 右箭头
// arrowR.addEventListener("click", arrowRFn);
// // 左箭头
// arrowL.addEventListener("click", arrowLFn);
// // 封装函数
// function arrowRFn() {
//   // 到达最后一张，再次点击则跳回第一张
//   ++index == imgList.length && (index = 0);
//   fn(lastIndex, index);
// }
// function arrowLFn() {
//   // 到达第一张，再次点击则跳回最后一张
//   --index < 0 && (index = imgList.length - 1);
//   fn(lastIndex, index);
// }
// function fn(last, idx) {
//   // 图片切换类名
//   imgList[last].classList.remove("imgActive");
//   imgList[idx].classList.add("imgActive");
//   // 小圆点切换类名
//   barList[last].classList.remove("barActive");
//   barList[idx].classList.add("barActive");

//   lastIndex = idx;
// }

// // 小圆点点击事件
// barList.forEach(function (el, idx) {
//   el.addEventListener("click", function () {
//     fn(lastIndex, idx);
//   });
// });

// // 自动轮播
// timeFn();
// function timeFn() {
//     if (timer) {
//         clearInterval(timer);
//     }
//     timer = setInterval(function () {
//         arrowRFn()
//     }, 1000);
// }

// // 鼠标移入box区域，停止定时器
// box.addEventListener("mouseenter", function () {
//     clearInterval(timer);
// });
// // 鼠标移出box区域，开始定时器
// box.addEventListener("mouseleave", function () {
//     setTimeout(timeFn, 2000)
// });

// // 检测页面是否切换，切换就停止定时器
// window.addEventListener("visibilitychange", function () {
//     if (document.hidden) {
//         clearInterval(timer);
//     } else {
//         timeFn();
//     }
// });
